<template>
  <el-descriptions
    title="六十四卦详情表"
    direction="vertical"
    :column="1"
    border
  >
    <el-descriptions-item label="卦名">{{
      sixtyfourInfo.guaName
    }}</el-descriptions-item>
    <el-descriptions-item label="卦象"
      ><img :src="sixtyfourInfo.guaXiangs.shang" class="images" /><br /><img
        :src="sixtyfourInfo.guaXiangs.xia"
        class="images"
    /></el-descriptions-item>
    <el-descriptions-item label="卦类型">{{
      sixtyfourInfo.guaType
    }}</el-descriptions-item>
    <el-descriptions-item label="卦义">{{
      sixtyfourInfo.guaYi
    }}</el-descriptions-item>
    <el-descriptions-item label="象曰">{{
      sixtyfourInfo.guaXiangyue
    }}</el-descriptions-item>
    <el-descriptions-item label="白话解释">{{
      sixtyfourInfo.guaBaihua
    }}</el-descriptions-item>
    <el-descriptions-item label="事业">{{
      sixtyfourInfo.guaShiye
    }}</el-descriptions-item>
    <el-descriptions-item label="经商">{{
      sixtyfourInfo.guaJingshang
    }}</el-descriptions-item>
    <el-descriptions-item label="求名">{{
      sixtyfourInfo.guaQiuming
    }}</el-descriptions-item>
    <el-descriptions-item label="外出">{{
      sixtyfourInfo.guaWaichu
    }}</el-descriptions-item>
    <el-descriptions-item label="婚恋">{{
      sixtyfourInfo.guaHunlian
    }}</el-descriptions-item>
    <el-descriptions-item label="决策">{{
      sixtyfourInfo.guaJuece
    }}</el-descriptions-item>
    <el-descriptions-item label="二进制">{{
      sixtyfourInfo.guaErjinzhi
    }}</el-descriptions-item>
  </el-descriptions>
</template>
<style>
.images {
  width: 10%;
  display: block;
}
</style>
<script>
import sixtyAPI from "@/api/core/gua/sixtyfour.js";
export default {
  data() {
    return {
      sixtyfourInfo: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      sixtyAPI.getDataById(this.$route.params.id).then((response) => {
        this.sixtyfourInfo = response.data.record;
      });
    },
  },
};
</script>
